<template>
    <div>
        <h1>显示分页查询</h1>
        <a href="Add">添加</a>
        <br>
        户型名称：<input type="text" v-model="paeg.houseName">
        户型结构：
        <select v-model="paeg.typeName">
            <option value=" ">请选择</option>
            <option value="朝阳">朝阳</option>
            <option value="不朝阳">不朝阳</option>
         </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.houseName}}</td>
                    <td>{{m.typeName}}</td>
                    <td>{{m.jianzhumianji}}</td>
                    <td>{{m.taoneimianji}}</td>
                    <td><img :src="'https://localhost:7280'+m.houseImg" alt="" style="width: 100px; height: 100px;"></td>
                    <td>
                        <a :href="'https://localhost:7280'+m.houseImg" alt="" style="width: 100px; height: 100px;" target="_blank">点击查看图片</a>
                        <br>
                        <input type="button" value="修改" @click="upda(m.houseId)">
                        <input type="button" value="删除" @click="del(m.houseId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
//修改
const upda=(houseId:any)=>{
    router.push({path:"/Update",query:{houseId:houseId}});
}
//反填
const FanT=(houseId:any)=>{
    router.push({path:"/Xiang",query:{houseId:houseId}});
}
const del=(houseId:any)=>{
    if(!confirm("确定删除吗"))
{
    return;
}
    axios.put("https://localhost:7280/api/House/LJdele?houseId="+houseId).then(res=>{
    
        alert("删除成功！")
        return;
   
    })
}
//查询
const paeg=ref({
    houseName: "",
    typeName: ""
})
onMounted(()=>{
    Show();
})
const data=ref([{
    "houseId": 0,
    "houseName": "",
    "typeName": "",
    "jianzhumianji": 0,
    "taoneimianji": 0,
    "houseImg": "",
    "deleId": 0
}])
const Show=()=>{
    axios.get("https://localhost:7280/api/House/GetAll",{params:paeg.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>